import './BookContent.css'
import React, { useState, useEffect, useRef } from 'react';

export default function BookContent(props) {
    const [startx, setStartx] = useState(0);
    const [starty, setStarty] = useState(0);
    const [index, setindex] = useState(0);
    const [page, setpage] = useState(0);
    const [judgelast, setjudgelast] = useState(false);
    const m = useRef();//要移动的对象
    useEffect(() => {
        if(props.contentfontsize===0){
            return;
        }
        m.current.style.fontSize=props.contentfontsize+"px";
        let el = document.getElementById("book-bottom");
        setpage(Math.ceil(el.offsetLeft / window.screen.width));
    }, [props.contentfontsize]);
    useEffect(() => {
        if(props.lineheight===0){
            return;
        }
        m.current.style.lineHeight=props.lineheight;
        let el = document.getElementById("book-bottom");
        setpage(Math.ceil(el.offsetLeft / window.screen.width));
    }, [props.lineheight]);
    useEffect(() => {
        if (props.artcontent === "") {
            return;
        }
        let el = document.getElementById("book-bottom");
        setpage(Math.ceil(el.offsetLeft / window.screen.width));
        console.log(judgelast);
        if (judgelast) {
            setindex(Math.ceil(el.offsetLeft / window.screen.width));
            if (Math.ceil(el.offsetLeft / window.screen.width) === 1) {
                m.current.style.transform = `translateX(0px)`;
            }
            else {
                m.current.style.transform = `translateX(calc(-${Math.ceil(el.offsetLeft / window.screen.width) * 100}vw + ${(Math.ceil(el.offsetLeft / window.screen.width) * 16)}px))`;
            }
        } else {
            setindex(0);
            m.current.style.transform = `translateX(0px)`;
        }
        setjudgelast(false);
    }, [props.artcontent]);

    const handleTouchStartDetail = (e) => {
        setStartx(e.touches[0].pageX);
        setStarty(e.touches[0].pageY);
        console.log("index==>", index);
        console.log("page=>", page);
        m.current.style.transition = `none`;
    };
    const handleTouchMoveDetail = (e) => {

        let now = startx - e.touches[0].pageX;
        if ((index === page && now > 0) || page === 1) {
            return;
        }
        if (index === 0) {
            now = now < 0 ? 0 : now;
        }
        m.current.style.transform = `translateX(calc(-${index * 100}vw + ${(index * 16 - now)}px))`
        if (props.artindex === 0 && now === 0) {
            props.movecontent.current.style.transition = "none";
            props.movecontent.current.style.left = -(startx - e.touches[0].pageX) + "px";
        }
    };
    const handleTouchEndDetail = (e) => {
        let endx, endy, newindex;
        endx = e.changedTouches[0].pageX;
        endy = e.changedTouches[0].pageY;
        let direction = getDirection(startx, starty, endx, endy);
        switch (direction) {
            case 0:
                props.changereadbar();
                console.log("未滑动！");
                break;
            case 1:
                console.log("向上！");
                break;
            case 2:
                console.log("向下！");
                break;
            case 3:
                if (index === page || page === 1) {
                    props.changeartindex(props.artindex + 1);
                }
                else {
                    newindex = index + 1;
                    m.current.style.transition = `all 0.3s ease-in-out`;
                    m.current.style.transform = `translateX(calc(-${newindex * 100}vw + ${(newindex * 16)}px))`
                    setindex(newindex);
                }

                console.log("向左！");
                break;
            case 4:
                if (index === 0 || page === 1) {
                    props.changeartindex(props.artindex - 1);
                    if (props.artindex - 1 !== -1) {
                        setjudgelast(true);
                    }
                } else {
                    newindex = index - 1;
                    newindex = newindex < 0 ? 0 : newindex
                    m.current.style.transition = `all 0.3s ease-in-out`;
                    m.current.style.transform = `translateX(calc(-${newindex * 100}vw + ${(newindex * 16)}px))`
                    setindex(newindex);
                }
                if (index === 0 && props.artindex === 0) {
                    props.movecontent.current.style.transition = "all 0.3s ease-in-out";
                    props.movecontent.current.style.left = window.screen.width + "px";
                }

                console.log("向右！");
                break;
            default:
        }
    };
    //根据接触和离开判断方向 1向上 2向下 3向左 4向右 0未发生滑动（[Math.abs][4]）
    const getDirection = (startx, starty, endx, endy) => {
        let angx = endx - startx;
        let angy = endy - starty;
        let result = 0;

        if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
            return result;
        }
        let angle = getAngle(angx, angy);
        if (angle >= -135 && angle <= -45) {
            result = 1;
        } else if (angle > 45 && angle < 135) {
            result = 2;
        } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
            result = 3;
        } else if (angle >= -45 && angle <= 45) {
            result = 4;

        }

        return result;
    }
    //触摸点和离开点连线与[x轴角度][3]
    const getAngle = (angx, angy) => {
        return Math.atan2(angy, angx) * 180 / Math.PI;
    };
    return (
        <div ref={props.movecontent} className='bookcontentbox'>
            <div className="bigflexbox">
                <div className="dragbox"
                    onTouchStart={handleTouchStartDetail}
                    onTouchMove={handleTouchMoveDetail}
                    onTouchEnd={handleTouchEndDetail}
                >
                    <div className="realcontent" dangerouslySetInnerHTML={{ __html: props.artcontent }}
                        ref={m}
                    >

                    </div>
                </div>
            </div>
        </div>
    );
}
